<template>
  <div>
    <!-- @changeValAction="handleChangeVal" -->
    <div style="position:absolute;right:10%;top:10px;z-index:100">
      <chart-select v-if="isShowSelect" :options="options"/>
    </div>
    <div ref="bar" style="width:100%;height:500px;" v-loading="loading"></div>
  </div>
</template>

<script>
// import {getChartData} from '@api/chart'
export default {
  data() {
    return {
      loading: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  props: {
    api: {
      type: String,
      default: undefined
    },
    isShowSelect: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    api(nv) {
      // getChartData(nv).then(res => {
      //   if (res.msg > 0) {
      //     resData = res;
      //   } else {
      //     this.$message("请求失败");
      //   }
      // });
    }
  },
  mounted() {
    this.loading = false;
    // 后台需要传：{xData:String|Array,title:String,legendData:Array,data:Array[object]}
    let myChart = this.$echarts.init(this.$refs.bar);
    let resData = {};
    resData.xData = [
      "1月份",
      "2月份",
      "3月份",
      "4月份",
      "5月份",
      "6月份",
      "7月份",
      "8月份",
      "9月份",
      "10月份",
      "11月份",
      "12月份"
    ];
    resData.title = "折柱混合图";
    resData.legendData = ["男", "女"];
    resData.data = [
      {
        name: "女",
        type: "bar",
        stack: "总量",
        barMaxWidth: 35,
        barGap: "10%",
        itemStyle: {
          normal: {
            color: "rgba(255,144,128,1)"
          }
        },
        data: [
          709,
          1917,
          2455,
          2610,
          1719,
          1433,
          1544,
          3285,
          5208,
          3372,
          2484,
          4078
        ]
      },

      {
        name: "男",
        type: "bar",
        stack: "总量",
        itemStyle: {
          normal: {
            color: "rgba(0,191,183,1)",
            barBorderRadius: 0
          }
        },
        data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220]
      },
      {
        name: "总数",
        type: "line",
        stack: "总量",
        symbolSize: 10,
        symbol: "circle",
        itemStyle: {
          normal: {
            color: "rgba(252,230,48,1)",
            barBorderRadius: 0,
            label: {
              show: true,
              position: "top",
              formatter: function(p) {
                return p.value > 0 ? p.value : "";
              }
            }
          }
        },
        data: [
          1036,
          3693,
          2962,
          3810,
          2519,
          1915,
          1748,
          4675,
          6209,
          4323,
          2865,
          4298
        ]
      }
    ];

    let option = {
      backgroundColor: "#fff",
      title: {
        text: resData.title,
        // subtext: "BY Wang Dingding",
        x: "2%",
        textStyle: {
          color: "rgba(96, 98, 102, 1)",
          fontSize: "20"
        }
        // subtextStyle: {
        //   color: "#90979c",
        //   fontSize: "16"
        // }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff"
          }
        }
      },
      grid: {
        left: "20%"
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        top: "10%",
        left: "2%",
        bottom: "10%",
        data: resData.legendData
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          data: resData.xData,
          // 提示线颜色
          axisPointer: {
            lineStyle: {
              color: "#4670dc"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#008ACD"
            }
          },
          axisTick: {
            lineStyle: {
              color: "008ACD"
            }
          },
          axisLabel: {
            color: "#008ACD"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#008ACD"
            }
          },
          axisTick: {
            lineStyle: {
              color: "#008ACD"
            }
          },
          axisLabel: {
            color: "#008ACD"
          },
          splitLine: {
            lineStyle: {
              color: ["#eee"]
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.1)"]
            }
          }
        }
      ],
      dataZoom: [
        {
          show: true,
          height: 30,
          xAxisIndex: [0],
          bottom: 30,
          start: 10,
          end: 80,
          handleSize: "110%",
          handleStyle: {
            color: "#d3dee5"
          },
          textStyle: {
            color: "#008ACD"
          },
          borderColor: "#90979c"
        },
        {
          type: "inside",
          show: true,
          height: 15,
          start: 1,
          end: 35
        }
      ],
      series: resData.data
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 浏览器窗口自适应
    window.onresize = function() {
      myChart.resize();
    };
  }
};
</script>

<style>
</style>
